import { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { ActionBar } from 'react-vant';
import { CartO, ChatO, ShopO } from '@react-vant/icons'
import { Popup } from 'react-vant'
import { Badge } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';


import axios from 'axios';
export default function Demo() {
    const { state: { item } } = useLocation()
    const [state, setState] = useState('')
    let [num, setNum] = useState(1)
    const navigate = useNavigate()

    const [cars, setCars] = useState([])
    const onClose = () => setState('')

    //加入购物车
    const shop = async () => {
        let obj = { ...item }
        obj.num = num
        let result = await axios.post(`http://127.0.0.1:3000/add_cart`, obj)
        if (result.data.code == 200) {
            setState('')
        }
    }
    const getCars = async () => {
        let result = await axios.get(`http://127.0.0.1:3000/cars`)
        if (result.data.code == 200) {
            setCars(result.data.data)
        }
    }
    //获取购物车
    useEffect(() => {
        getCars()
    }, [])
    return (
        <div>
            <div style={{ width: '100%' }}>
                <img src={'/img/' + item.imgsrc} alt="" style={{ width: "100%", height: "300px" }} />
            </div>
            <div style={{ fontWeight: '700' }}>

                <div style={{ fontWeight: '700', padding: '5px', boxSizing: 'border-box' }}>

                    {item.name}
                </div>
                <div style={{
                    display: 'flex', justifyContent: 'space-between',
                    alignItems: 'center', marginTop: '20px', margin: '0px 10px'
                }}>
    
                    <h3 style={{ color: 'red' }}>￥{item.price}</h3>&nbsp;&nbsp;
                    <span style={{ textDecoration: 'line-through' }}>￥2365.55</span>
                </div>
                <p>销量&nbsp;<span style={{ color: 'orangered' }}>{item.sale}+</span></p>
            </div>


            <ActionBar>
                <ActionBar.Icon
                    icon={<ChatO />}
                    text='客服'
                    onClick={() => console.log('chat click')}
                />
                <Badge content={cars.length}>
                    <ActionBar.Icon
                        icon={<CartO />}
                        text='购物车'
                        onClick={() => navigate('/cars')}
                    />
                </Badge>

                <ActionBar.Icon
                    icon={<ShopO />}
                    text='店铺'
                    onClick={() => console.log('shop click')}
                />
                <ActionBar.Button
                    type='danger'
                    text='加入购物车'
                    onClick={() => setState('bottom')}
                />
            </ActionBar>



            <Popup
                visible={state === 'bottom'}
                style={{ height: '70%' }}
                position='bottom'
                onClose={onClose}
            >
                <div style={{ display: 'flex', alignItems: 'center', padding: '10px 10px', boxSizing: 'border-box' }}>
                    <img src={'/img/' + item.imgsrc} alt="" style={{
                        width: "28%",
                        height: '100px',
                        border: '5px solid orange'
                    }} />
                    <div style={{ marginLeft: '5px' }}>
                        <div style={{ fontWeight: "700", fontSize: '20px' }}>￥{item.price}</div>
                        <div>剩余155</div>
                    </div>
                </div>
                <div style={{ marginTop: "20px", marginLeft: '5px' }}>
                    <button style={{ width: '30px', height: "30px" }} onClick={() => {
                        setNum(--num)
                    }}>-</button>
                    <input type="text" value={num} onChange={(event) => {
                        setNum(event.target.value)
                    }} style={{ width: "30px", height: "29px", textAlign: 'center' }} />
                    <button style={{ width: '30px', height: "30px" }} onClick={() => {
                        setNum(++num)
                    }}>+</button>
                </div>
                <button style={{
                    marginTop: "20px", width: "100px", height: "30px"
                    , background: "orange", color: '#fff', border: 'none'
                    , background: "orange", color: '#fff', border: 'none', marginLeft: '5px',
                    borderRadius: '50px'
                }} onClick={() => {
                    shop()
                }}>确定</button>
            </Popup>
        </div>
    )
}
